<template>
	<div id="permissionlist">
		<div class="table">
			<div class="crumbs">
				<el-breadcrumb separator="/">
					<el-breadcrumb-item><i class="el-icon-menu"></i>&nbsp;用户管理</el-breadcrumb-item>
					<el-breadcrumb-item>功能列表</el-breadcrumb-item>
				</el-breadcrumb>
			</div>
			<!--<div style="overflow: hidden;">
		        <div class="handle-box" style="float: left">	           
		            <el-input v-model="select_word" placeholder="角色名称筛选" class="handle-input mr10"></el-input>
		            <el-button type="primary" icon="search" >搜索</el-button>
		        </div>
		        <div style="float: right">
	                <el-button  icon="add">创建角色</el-button>
	            </div>
            </div>-->
			<div class="tree_">

				<el-button type="text" size="mini" @click='() => appendShow({
		      permissionDesc: "",
		      permissionName: "",
		      permissionParentId: 0,
		      permissionStatus: 1,
		      permissionCode:0,
		      permissionId:0,
		      permissionUri: ""
		    })'>
					添加
				</el-button>
				<el-tree :data="rpTreeValue" node-key="id" default-expand-all @node-drag-start="handleDragStart" @node-drag-enter="handleDragEnter" @node-drag-leave="handleDragLeave" @node-drag-over="handleDragOver" @node-drag-end="handleDragEnd" @node-drop="handleDrop" :props="defaultProps" :expand-on-click-node="false" draggable :indent='40' :allow-drop="allowDrop" :allow-drag="allowDrag">
					<span class="custom-tree-node" slot-scope="{ node, data }">
        <span>{{ node.label }}</span>
					<span>
          <el-button
            type="text"
            size="mini"
            @click="() => appendShow(data)">
            添加
          </el-button>
          <el-button
            type="text"
            size="mini"
            @click="() => editShow(data)">
            	编辑
          </el-button>
        </span>
					</span>
				</el-tree>
			</div>

		</div>

		<!--新增权限-->
		<el-dialog title="角色详情" :visible.sync="priDialogFormVisible3" class="dialogDiv">
			<div style="text-align:center;">
				<div style="text-align:left;width:600px;margin:0 auto;">
					<el-form :model="addPermission" label-width="100px" class="demo-ruleForm" style="width:60%;">

						<el-form-item label="权限名称" prop="permissionName">
							<el-input v-model="addPermission.permissionName" :maxlength="20"></el-input>
						</el-form-item>
						<el-form-item label="权限编码" prop="permissionCode">
							<el-input v-model="addPermission.permissionCode" :maxlength="20"></el-input>
						</el-form-item>
						<el-form-item label="权限路由" prop="permissionUri">
							<el-input v-model="addPermission.permissionUri" :maxlength="20"></el-input>
						</el-form-item>
						<el-form-item label="权限描述" prop="permissionDesc">
							<el-input type="textarea" v-model="addPermission.permissionDesc"></el-input>
						</el-form-item>
					</el-form>
				</div>
			</div>
			<div slot="footer" class="dialog-footer">
				<el-button @click="priDialogFormVisible3=false">关闭</el-button>
				<el-button type="primary" @click="append()">保存</el-button>
			</div>
		</el-dialog>
		<!--编辑权限-->
		<el-dialog title="角色详情" :visible.sync="priDialogFormVisible2" class="dialogDiv">
			<div style="text-align:center;">
				<div style="text-align:left;width:600px;margin:0 auto;">
					<el-form :model="selectedPermission" label-width="100px" class="demo-ruleForm" style="width:60%;">
						<el-form-item label="权限名称" prop="permissionName">
							<el-input v-model="selectedPermission.permissionName" :maxlength="20"></el-input>
						</el-form-item>

						<el-form-item label="权限编码" prop="RoleCode">
							<el-input v-model="selectedPermission.permissionCode" :maxlength="20"></el-input>
						</el-form-item>

						<el-form-item label="权限路由" prop="permissionUri">
							<el-input v-model="selectedPermission.permissionUri" :maxlength="20"></el-input>
						</el-form-item>
						<el-form-item label="权限描述" prop="permissionDesc">
							<el-input type="textarea" v-model="selectedPermission.permissionDesc"></el-input>
						</el-form-item>
					</el-form>
				</div>
			</div>
			<div slot="footer" class="dialog-footer">
				<el-button @click="priDialogFormVisible2=false">关闭</el-button>
				<el-button type="primary" @click="edit()">保存</el-button>
			</div>
		</el-dialog>
	</div>
</template>
<script>
	import Vue from 'vue';
	import $ from 'jquery';
	export default {
		data() {
			return {
				value3: true,
				value2: true,
				url: './static/vuetable.json',
				tableData: [],
				select_word: '',
				rpTreeValue: [],
				defaultProps: {
					children: 'childrenList',
					label: 'permissionName'
				},
				dialogFormVisible: false,
				priDialogFormVisible2: false,
				priDialogFormVisible3: false,
				selectedRoleId: '',
				selectedRoleName: '',
				loading: false,
				checkNode: [],
				selectedPermission: {},
				addPermission: {
					permissionDesc: "",
					permissionName: "",
					permissionParentId: 0,
					permissionStatus: 1,
					permissionUri: "",
					permissionCode: ''
				}
			};
		},
		created() {
			this.getData()
		},
		methods: {
			getData() {
				this.httptool.ajaxAsyncPost('permission/tree', null, (res) => {
					//  			let data = JSON.stringify(res.data).replace(/permissionName/g,'label')
					this.rpTreeValue = res.data;
				}, function() {
					self.loading = false;
				});
			},
			handleDragStart(node, ev) {
				//	        console.log(node);
			},
			handleDragEnter(draggingNode, dropNode, ev) {
				console.log('tree drag enter: ', dropNode[this.defaultProps.label]);
			},
			handleDragLeave(draggingNode, dropNode, ev) {
				console.log('tree drag leave: ', dropNode[this.defaultProps.label]);
			},
			handleDragOver(draggingNode, dropNode, ev) {
				console.log('tree drag over: ', dropNode[this.defaultProps.label]);
			},
			handleDragEnd(draggingNode, dropNode, dropType, ev) {
				console.log('tree drag end: ', dropNode[this.defaultProps.label], dropType);
				console.log(dropNode)
			},
			handleDrop(draggingNode, dropNode, dropType, ev) {
				console.log('tree drop: ', dropNode[this.defaultProps.label], dropType);
			},
			allowDrop(draggingNode, dropNode, type) {
				if(dropNode.data[this.defaultProps.label] === '二级 3-1') {
					return type !== 'inner';
				} else {
					return true;
				}
			},
			allowDrag(draggingNode) {
				return draggingNode.data[this.defaultProps.label].indexOf('三级 3-1-1') === -1;
			},

			append(data) {
				console.log(this.addPermission)
				this.addPermission.permissionParentId = this.selectedPermission.permissionId
				this.httptool.ajaxAsyncPost('permission/save', this.addPermission, (res) => {
					this.getData()
					this.priDialogFormVisible3 = false;
				}, function() {
					self.loading = false;
				});
			},
			appendShow(data) {
				this.priDialogFormVisible3 = true;
				console.log(data)
				this.selectedPermission = data;
				this.addPermission = {
					permissionDesc: "",
					permissionName: "",
					permissionParentId: 0,
					permissionStatus: 1,
					permissionUri: "",
					permissionCode: ''
				}
			},
			editShow(data) {
				this.priDialogFormVisible2 = true;
				this.selectedPermission = data;
			},
			edit() {
				this.httptool.ajaxAsyncPost('permission/save', this.selectedPermission, (res) => {
					this.getData()
					this.priDialogFormVisible2 = false;
					window.location.reload()
				}, function() {
					self.loading = false;
				});
			},
			remove(node, data) {
				const parent = node.parent;
				const children = parent.data.children || parent.data;
				const index = children.findIndex(d => d.id === data.id);
				children.splice(index, 1);
			},

			remove(node, data) {
				const parent = node.parent;
				const children = parent.data.children || parent.data;
				const index = children.findIndex(d => d.id === data.id);
				children.splice(index, 1);
			},

		}
	};
</script>
<style src="./currentpage.less" lang="less"></style>